<template>
  <view class="floorItem" v-if="item">
    <u-image
      :src="item.floor_title.image_src"
      width="100%"
      height="59rpx"
    ></u-image>
    <view class="productList">
      <u-image
        width="232rpx"
        height="386rpx"
        :src="item.product_list[0].image_src"
      ></u-image>
      <view class="right">
        <u-image
          class="rightImg"
          width="233rpx"
          height="188rpx"
          :src="item.product_list[1].image_src"
        ></u-image>
        <u-image
          class="rightImg"
          width="233rpx"
          height="188rpx"
          :src="item.product_list[2].image_src"
        ></u-image>
        <u-image
          class="rightImg"
          width="233rpx"
          height="188rpx"
          :src="item.product_list[3].image_src"
        ></u-image>
        <u-image
          class="rightImg"
          width="233rpx"
          height="188rpx"
          :src="item.product_list[4].image_src"
        ></u-image>
      </view>
    </view>
  </view>
</template>

<script>
  export default {
    props: {
      item: {
        type: Object,
        required: true,
      },
    },
  };
</script>

<style lang="scss" scoped>
  .floorItem {
    padding: 12rpx;
  }
  .productList {
    display: flex;
    .right {
      justify-content: space-around;
      height: 386rpx;
      display: flex;
      flex-wrap: wrap;
      align-content: space-between;
    }
  }
</style>